<template>
  <div class="mainBox">
    <div class="topTitle">
      <div class="btnBack" @click="$router.back()">返回</div>
    </div>
    <div class="topSelectBox">
      <div class="left">
        <div class="company">
          {{ selectCompanyValue }}<i class="el-icon-arrow-down"></i>
        </div>
        <div class="companyList">
          <div
            class="companyItem"
            v-for="item in selectCompanyList"
            :key="item.companyCode"
            @click="chooseCompanyEquip(item.enterpriseName, item.companyCode)"
          >
            {{ item.enterpriseName }}
          </div>
        </div>
      </div>
      <div class="right">
        <div class="equip">
          {{ equipValue }}<i class="el-icon-arrow-down"></i>
        </div>
        <div class="equipList">
          <div
            class="equipItem"
            v-for="item in equipList"
            :key="item.equipCode"
            @click="chooseEquip(item.equipCode)"
          >
            {{ item.equipName }}
          </div>
        </div>
      </div>
    </div>
    <div class="rightBox1">
      <div class="title">除尘设备启停信号</div>
      <div class="status">
        <div class="img">
          <img src="../assets/thirdView/运行中@1x.png" alt="" />
        </div>
        <div>{{ cleanEquipDesc.targetStatusName }}</div>
      </div>
      <div class="desc">
        <div class="left">
          <div class="name">
            {{
              cleanEquipDesc.enterpriseName
                ? cleanEquipDesc.enterpriseName
                : '暂无设备'
            }}
          </div>
          <div class="name">除尘设备名称:{{ cleanEquipDesc.equipName }}</div>
          <div class="name">安装日期:{{ cleanEquipDesc.setDate }}</div>
          <div class="name">所属涉粉场所:{{ cleanEquipDesc.placeCode }}</div>
        </div>
        <div class="right">
          <div class="name">除尘设备名称:{{ cleanEquipDesc.equipName }}</div>
          <div class="name">控爆措施:{{ cleanEquipDesc.bombControlName }}</div>
          <div class="name">设备负责人:{{ cleanEquipDesc.updatorName }}</div>
        </div>
      </div>
    </div>
    <div class="rightBox2">
      <div class="title">当前报警情况</div>
      <div class="contentBox">
        <div class="rowBox" v-for="item in alarmInfoList" :key="item.alarmId">
          <div class="time">{{ item.startAlarmTime }}</div>
          <div class="rowDesc">{{ item.targetType }}</div>
          <div class="rowStatus">{{ item.targetStatus }}</div>
        </div>
      </div>
    </div>

    <div class="pQG">排风管</div>
    <div class="pQG cCQ">除尘器</div>
    <div class="pQG hD">灰斗</div>
    <div class="pQG jFG">进风管</div>
    <div class="pQG sFCS">涉粉场所</div>
    <div class="pQG jCC">集尘仓</div>

    <div class="fYCBox">
      <div class="title">风压差</div>
      <div class="status">{{ targetInfoDesc.fyc }}</div>
    </div>
    <div class="cCQBox">
      <div class="title">除尘器灰斗温度</div>
      <div class="status">{{ targetInfoDesc.ccqhdwd }}</div>
    </div>

    <div class="cCQBox sQXHBox">
      <div class="title">锁气卸灰装置信号</div>
      <div class="status">{{ targetInfoDesc.sqxhzzxh }}</div>
    </div>

    <div class="cCQBox jccWd">
      <div class="title">集尘仓温度</div>
      <div class="status">{{ targetInfoDesc.cccwd }}</div>
    </div>
    <div class="hHTCBox">
      <div class="title">火花探测器报警信号</div>
      <div class="status">{{ targetInfoDesc.hhtcqjbxh }}</div>
    </div>

    <div class="hHTCBox hHXMBox">
      <div class="title">火花熄灭装置水压</div>
      <div class="status">{{ targetInfoDesc.hhxmzzsy }}</div>
    </div>
  </div>
</template>

<script>
import {
  companyList,
  getEquipInfoByCompanyCode,
  getEquipInfoByCode,
  getAlarmInfoByEquipCode,
  getTargetInfoByEquipCode,
} from '../api/thirdView'
export default {
  name: 'thirdView',
  props: {},
  components: {},
  data() {
    return {
      selectCompanyList: [],
      selectCompanyValue: '',
      equipValue: '',
      equipList: [],
      cleanEquipDesc: {},
      alarmInfoList: [],
      targetInfoDesc: {
        fyc: '离线',
        ccqhdwd: '离线',
        sqxhzzxh: '离线',
        hhtcqjbxh: '离线',
        hhxmzzsy: '离线',
        cccwd: '离线',
      },
    }
  },
  created() {
    console.log(this.$route.query)
    this.companyList()
  },
  methods: {
    async companyList() {
      const res = await companyList()
      console.log(res)
      this.selectCompanyList = res.data
      if (this.$route.query.enterpriseName) {
        this.selectCompanyValue = this.$route.query.enterpriseName
        this.getEquipInfoByCompanyCode(this.$route.query.companyCode)
      } else {
        this.selectCompanyValue = res.data[0].enterpriseName
        this.getEquipInfoByCompanyCode(res.data[0].companyCode)
      }
    },
    chooseCompanyEquip(name, code) {
      console.log(code)
      this.selectCompanyValue = name
      this.getEquipInfoByCompanyCode(code)
    },
    async getEquipInfoByCompanyCode(code) {
      const res = await getEquipInfoByCompanyCode({ companyCode: code })
      console.log(res)
      this.equipList = res.data
      this.equipValue = res.data[0]?.equipName
        ? res.data[0].equipName
        : '暂无设备'
      if (res.data.length > 0) {
        this.getEquipInfoByCode({ equipCode: res.data[0].equipCode })
        this.getAlarmInfoByEquipCode({ equipCode: res.data[0].equipCode })
        this.getTargetInfoByEquipCode({ equipCode: res.data[0].equipCode })
      } else {
        this.alarmInfoList = []
        this.cleanEquipDesc = {}
        this.targetInfoDesc = {
          fyc: '离线',
          ccqhdwd: '离线',
          sqxhzzxh: '离线',
          hhtcqjbxh: '离线',
          hhxmzzsy: '离线',
          cccwd: '离线',
        }
      }
    },
    // 设备
    async getEquipInfoByCode(code) {
      const res = await getEquipInfoByCode(code)
      console.log(res)
      this.cleanEquipDesc = res.data
    },
    chooseEquip(equipCode) {
      this.getEquipInfoByCode({ equipCode })
      this.getAlarmInfoByEquipCode({ equipCode })
      this.getTargetInfoByEquipCode({ equipCode })
    },
    async getAlarmInfoByEquipCode(equipCode) {
      const res = await getAlarmInfoByEquipCode(equipCode)
      this.alarmInfoList = res.data
    },
    async getTargetInfoByEquipCode(equipCode) {
      const res = await getTargetInfoByEquipCode(equipCode)
      console.log(res)
      res.data.forEach((item) => {
        if (item.targetType === '02') {
          this.targetInfoDesc.fyc = item.targetStatusName
        } else if (item.targetType === '04') {
          this.targetInfoDesc.ccqhdwd = item.targetStatusName
        } else if (item.targetType === '03') {
          this.targetInfoDesc.sqxhzzxh = item.targetStatusName
        } else if (item.targetType === '16') {
          this.targetInfoDesc.hhtcqjbxh = item.targetStatusName
        }
      })
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.mainBox {
  width: 1920px;
  height: 1080px;
  background-image: url('../assets/thirdView/涉爆粉尘@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
}
.topTitle {
  background-image: url('../assets/headertitle.png');
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 120px;
  .btnBack {
    background-image: url('../assets/thirdView/Btn-Back@1x (1).png');
    width: 111px;
    height: 36px;
    position: absolute;
    left: 20px;
    top: 8px;
    text-align: center;
    line-height: 36px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
  }
}
.topSelectBox {
  position: absolute;
  left: 53px;
  top: 78px;
  font-size: 14px;
  color: #fff;
  display: flex;
  position: relative;
  width: 500px;
  .left {
    background-image: url('../assets/thirdView/Rectangle 1@1x.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 232px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-right: 30px;
    cursor: pointer;
    .company {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .companyList {
    position: absolute;
    top: 35px;
    width: 230px;
    background-color: #2a5765;
    border: 1px solid #03a4bc;
    border-radius: 5px;
    display: none;
    cursor: pointer;
  }
  .companyItem:hover {
    color: #022627;
    background-color: #75fbfd;
  }
  .left:hover > .companyList {
    display: block;
  }
  .right {
    background-image: url('../assets/thirdView/Rectangle 1@1x.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 232px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    .equip {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .equipList {
    position: absolute;
    top: 35px;
    width: 232px;
    background-color: #2a5765;
    border: 1px solid #03a4bc;
    border-radius: 5px;
    display: none;
    cursor: pointer;
    z-index: 999;
  }
  .equipItem:hover {
    color: #022627;
    background-color: #75fbfd;
  }
  .right:hover > .equipList {
    display: block;
  }
}
.rightBox1 {
  position: absolute;
  top: 210px;
  right: 14px;
  background-image: url('../assets/thirdView/6385f5ede98f71193c9daa92cae6c7a70035bdc67b84-zMULDy@1x.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 529px;
  height: 320px;
  .title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
  }
  .status {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ffff;
    font-size: 18px;
    margin-bottom: 10px;
    .img {
      margin-right: 20px;
    }
  }
  .desc {
    display: flex;
    justify-content: space-around;
    padding: 0 50px;
    color: #fff;
    font-size: 14px;
    .name {
      margin-bottom: 20px;
    }
  }
}
.rightBox2 {
  position: absolute;
  top: 560px;
  right: 14px;
  background-image: url('../assets/thirdView/6385f5ede98f71193c9daa92cae6c7a70035bdc67b84-zMULDy@1x.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 529px;
  height: 320px;
  .title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
  }
  .contentBox {
    padding: 0 70px;
    margin-top: 25px;
    font-size: 14px;
    .rowBox {
      display: flex;
      justify-content: space-between;
      color: #fff;
      margin-bottom: 30px;
      .rowStatus {
        color: #ff6161;
        font-size: 14px;
      }
    }
  }
}

.pQG {
  position: absolute;
  background-image: url('../assets/thirdView/Path 1@1x.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  left: 201px;
  top: 650px;
  width: 105px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 20px;
}
.cCQ {
  left: 474px;
  top: 451px;
}
.hD {
  left: 496px;
  top: 770px;
}
.jFG {
  left: 682px;
  top: 541px;
}
.sFCS {
  left: 792px;
  top: 323px;
}
.jCC {
  left: 973px;
  top: 606px;
}
.fYCBox {
  background-image: url('../assets/thirdView/c58ae3fa2d0d95f3d4ee088fb5d5cb88968a7ac0d85c-aw0Tpw@1x.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 119px;
  height: 92px;
  position: absolute;
  left: 272px;
  top: 510px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  .title {
    margin-top: 17px;
    text-align: center;
  }
  .status {
    color: #ff9317;
    text-align: center;
  }
}
.cCQBox {
  background-image: url('../assets/thirdView/c58ae3fa2d0d95f3d4ee088fb5d5cb88968a7ac0d85c-aw0Tpw@1x_副本.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 197px;
  height: 92px;
  position: absolute;
  left: 249px;
  top: 825px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  .title {
    margin-top: 17px;
    text-align: center;
  }
  .status {
    color: #04f8f9;
    text-align: center;
  }
}
.sQXHBox {
  left: 569px;
  top: 834px;

  .status {
    color: #ff9317;
    text-align: center;
  }
}
.jccWd {
  left: 889px;
  top: 684px;
}
.hHTCBox {
  background-image: url('../assets/thirdView/c58ae3fa2d0d95f3d4ee088fb5d5cb88968a7ac0d85c-aw0Tpw@1x_副本.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 234px;
  height: 92px;
  position: absolute;
  left: 864px;
  top: 200px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  .title {
    margin-top: 17px;
    text-align: center;
  }
  .status {
    color: #ff9317;
    text-align: center;
  }
}
.hHXMBox {
  left: 1007px;
  top: 301px;
}
</style>
